<template>
  <uni-nav-bar title="派单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view :style="{ opacity: curPage === 'map' ? '0' : '1'}">
    <view class="package_sale" v-if="orderAll">
      <view class="space-between">
        <view>车友</view>
        <view>{{orderAll.driver_name}}</view>
      </view>
      <view class="space-between top">
        <view>手机号</view>
        <view>{{orderAll.driver_mobile}}</view>
      </view>
      <view class="space-between top">
        <view>车牌号</view>
        <view>{{orderAll.cart_code}}</view>
      </view>
      <view class="space-between top">
        <view>配送地址 <uni-tag text="已修改" type="primary" :inverted="true" :circle="true" style="margin-left:10rpx;"
            v-if="locName"></uni-tag></view>
        <view @click="chooseLocation" class="center"
          style="align-items: flex-start;width:60%;justify-content: flex-end;">
          {{locName?locName:orderAll.delivery_address}}
          <uni-icons type="location" size="25"></uni-icons>
        </view>
      </view>
      <view class="space-between">
        <view>预约时间</view>
        <view>{{orderAll.subscribe_time_text}}</view>
      </view>
      <view class="space-between top">
        <view>调度时间</view>
        <view class="center" style="justify-content: flex-end;">
          <view style="font-size: 28rpx;"> {{delivery_time?'指定时间':'预约时间'}}</view>
          <view style="font-size: 24rpx;margin-left:10rpx;" @click="openTimePicker()">
            大约{{time?time:orderAll.delivery_time_text}}送达 ></view>
        </view>
      </view>
      <view class="top">
        <view>当前配送员</view>
        <view class="center lis" v-if="listAll&&listAll.staff">
          <view v-for="(item,index) in listAll.staff" :key="index" :class="staff_id===item.value?'active':''"
            @click="()=>staff_id=item.value">
            {{item.label}}
          </view>
        </view>
      </view>
      <view class="top">
        <view>备注</view>
        <textarea class="textarea" v-model="value" placeholder="备注"></textarea>
      </view>
    </view>
    <view class="add" @click="submit()">确定</view>
  </view>
  <!-- 预约时间弹框 -->
  <TimePicker ref="TimePickerRef" @jisuanScore="jisuanScores" />
  <!-- 选择地址列表 -->
  <view v-if="curPage === 'map'"><web-view :src="mapURI"></web-view></view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { onLoad } from '@dcloudio/uni-app';
  import { toPublish } from '@mqtt';
  import { getTaskParams, getTaskInfo } from '@/gql/dispatch';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import TimePicker from '@c/reservation/TimePicker.vue';
  import { ref, Ref } from 'vue';
  import { getDriverID } from '@/stores/driverID';
  const admin_id = getDriverID();
  const value = ref('');//备注
  const TimePickerRef = ref(null);//预约时间弹框

  const staff_id = ref() //配送员ID
  const listAll = ref() //配送员列表

  const delivery_time = ref() //时间戳
  const time = ref() //具体时间

  const orderID = ref() //任务单ID
  const orderAll = ref() //任务单信息
  //地图、位置信息
  const curPage : Ref<'form' | 'map'> = ref('form');
  const longitude = ref()
  const latitude = ref()
  const mapURI = ref('');
  const locName = ref('')
  onLoad((pearm) => {
    orderID.value = pearm.id
    details()
  })
  function details() {
    showLoading()
    const payload = {
      query: getTaskInfo,
      variables: {
        id: Number(orderID.value),
      },
    };
    toPublish(
      'ql/control/getTaskInfo',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getTaskInfo } = obj.data;
        orderAll.value = getTaskInfo
        value.value = getTaskInfo.des
        staff_id.value = getTaskInfo.staff_id
      }
    );
  }
  // 获取数据信息
  init()
  function init() {
    showLoading()
    const payload = {
      query: getTaskParams
    };
    toPublish(
      'ql/control/getTaskParams',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getTaskParams } = obj.data;
        listAll.value = getTaskParams
        staff_id.value = getTaskParams.staff[0].value
      }
    );
  }
  // 预约时间
  function jisuanScores(tim : any, date : string, day : string) {
    delivery_time.value = tim
    time.value = day ? day + '-' + date : date
  }
  // TimePicker
  function openTimePicker() {
    TimePickerRef.value.open();
  }
  // 跳转到地址列表 选择位置信息
  function chooseLocation() {
    mapURI.value = `https://apis.map.qq.com/tools/locpicker?coord=${orderAll.value.latitude},${orderAll.value.longitude}&search=1&type=1&key=URFBZ-F4TKI-SLPGX-57GMO-ZHYM6-BCFSL&referer=安蓝环保`;
    curPage.value = 'map';
    function msgListener(event : any) {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      var loc = event.data;
      if (loc && loc.module == 'locationPicker') {
        console.log(JSON.stringify(loc) + '*****')
        curPage.value = 'form';
        longitude.value = loc.latlng.lng;
        latitude.value = loc.latlng.lat;
        locName.value = loc.poiname
        //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        window.removeEventListener('message', msgListener);
      }
    }
    window.addEventListener('message', msgListener, false);
  }
  //提交修改任务
  function submit() {
    showLoading()
    const payload = {
      staff_id: staff_id.value,
      longitude: longitude.value ? longitude.value : orderAll.value.longitude,
      latitude: latitude.value ? latitude.value : orderAll.value.latitude,
      delivery_address: locName.value ? locName.value : orderAll.value.address,
      id: Number(orderID.value),
      des: value.value,
      delivery_time: delivery_time.value ? delivery_time.value : orderAll.value.deliverytime
    };
    toPublish('control/editDeliveryTask',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          navBack()
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .top {
    margin-top: 20rpx;
    align-items: flex-start;

    input {
      text-align: right;
    }
  }

  .lis {
    flex-wrap: wrap;

    view {
      min-width: 160rpx;
      text-align: center;
      padding: 13rpx 20rpx 15rpx;
      box-sizing: border-box;
      background-color: #ECF1F5;
      color: #333;
      border-radius: 5px;
      margin: 18rpx 20rpx 10rpx 0px;
    }

    .active {
      background: #3F90FF;
      color: #FFFFFF;
    }
  }

  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 50rpx auto 0px;
    font-size: 32rpx;
  }

  uni-textarea {
    width: 100%;
    background: #eee;
    border-radius: 5px;
    margin-top: 20rpx;
    padding: 15rpx;
    box-sizing: border-box;
  }
</style>